<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="soccer.css">
</head>

<body>

  <h2>将超级英雄放置在足球场周围。</h2>

  <p>超级英雄和球都是带有 "draggable" 类的元素。使它们真的可拖动（draggable）。</p>

  <p>重要：通过窗口限制拖动。如果可拖动的元素被拖到窗口的顶端或末端，则页面应该滚动以让我们进一步拖动它。</p>

  <p>如果你的屏幕足够大，能够把整个文档都显示出来 —— 那么请缩小窗口以进行垂直滚动，以便对此进行测试。</p>

  <p>在此任务中，处理垂直滚动就够了。通常没有水平滚动，并且在需要时可以采用类似的方式进行处理。</p>

  <p>此外：英雄永远都不会离开页面。如果它们到达了文档的边缘，它们不会被拖动到文档外。</p>

  <div id="field">

  </div>

  <div class="hero draggable" id="hero1"></div>
  <div class="hero draggable" id="hero2"></div>
  <div class="hero draggable" id="hero3"></div>
  <div class="hero draggable" id="hero4"></div>
  <div class="hero draggable" id="hero5"></div>
  <div class="hero draggable" id="hero6"></div>

  <img src="https://en.js.cx/clipart/ball.svg" class="draggable">

  <div style="clear:both"></div>

  <script src="soccer.js"></script>
</body>

</html>
